// =================================
// ==============scrollbar==========
// =================================

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b6b7b9;
}

// =================================
// ==============nprogress==========
// =================================
#nprogress {
  pointer-events: none;

  .bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--top-zindex);
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    opacity: 0.75;
  }
}

// =================================
// ============ConfirmPopup========
// =================================
.#{$tonyname}-confirm-popup {
  --el-messagebox-width: 400px;
  --el-bg-color: var(--background-primary-color);

  padding: 3rem 0 0;
  border: none;
  border-radius: var(--radius-base);
  box-shadow: 0 4px 8px rgba(9, 22, 31, 0.15), 0 16px 32px rgba(9, 22, 31, 0.15);

  .el-message-box {

    &__header {
      padding: 0 1.5rem;
      text-align: center;
      --el-messagebox-font-size: 1.5rem;
      --el-messagebox-title-color: var(--text-primary-color);
    }

    &__title {
      line-height: normal;
    }

    &__content {
      padding: 0 1.5rem;
      margin-top: 1rem;
      font-size: 1rem;
      text-align: center;
      --el-messagebox-content-color: var(--text-secondary-color);
    }

    &__btns {
      padding: 0;
      margin-top: 2rem;

      .el-button {
        flex: 1;
        height: 50px;
        padding: 0;
        margin: 0;
        font-size: 1rem;
        color: var(--text-regular-color);
        background: var(--background-regular-color);
        border: none;
        border-radius: 0;

        &--primary {
          color: #fff;
          background: var(--primary-color);
        }

        &--danger {
          color: #fff;
          background: var(--danger-color);
        }

        &--warning {
          color: #fff;
          background: var(--warning-color);
        }

        &--success {
          color: #fff;
          background: var(--success-color);
        }

        &:hover {
          filter: brightness(0.96);
        }
      }
    }
  }

  &__error .el-message-box__btns {
    .el-button:nth-child(2) {
      color: #fff;
      background: var(--danger-color);
    }
  }

  &__warning .el-message-box__btns {
    .el-button:nth-child(2) {
      color: #fff;
      background: var(--warning-color);
    }
  }

  &__success .el-message-box__btns {
    .el-button:nth-child(2) {
      color: #fff;
      background: var(--success-color);
    }
  }

  &__info .el-message-box__btns {
    .el-button:nth-child(2) {
      color: #fff;
      background: var(--primary-color);
    }
  }
}
